<template>
  <div class="g-bd">
    <!-- 电台节目排名 -->
    <div class="rank-wrap">
      <div class="blk">
        <div class="u-title">
          <h3>节目排行榜</h3>
          <span class="sub">最近更新：{{ dateFormat }}</span>
        </div>
        <ul class="topl">
          <li
            v-for="(top, index) in radioTopList"
            :key="top.id"
            :class="index % 2 !== 0 ? 'bg' : ''"
          >
            <div class="rank f-fl">
              <em :class="index <= 2 ? 'top' : ''">{{
                (index + 1).toString().padStart(2, '0')
              }}</em>
              <!-- top.lastRank - top.rank > 0 ? 'rank-up' : 'rank-down' -->
              <span
                :class="
                  top.lastRank == -1
                    ? 'new'
                    : top.lastRank - (index + 1) > 0
                    ? 'rank-up'
                    : top.lastRank - (index + 1) < 0
                    ? 'rank-down'
                    : ''
                "
                ><i class="u-icn"></i
                >{{
                  top.lastRank == -1
                    ? ''
                    : top.lastRank - (index + 1) > 0
                    ? top.lastRank - (index + 1)
                    : index + 1 - top.lastRank
                }}</span
              >
            </div>
            <router-link :to="`/program?id=${top.program.id}`" class="a-imgwrap f-fl tl-a"
              ><img :src="top.program.coverUrl + '?param=40x40'" alt="" />
              <i class="u-iconall ply" @click.prevent="playList(top.program)"></i
            ></router-link>
            <div class="f-fl cnt-wrap tl-cnt">
              <h3>
                <!-- <router-link :to="`/program?id=${top.program.id}`" :title="top.program.name">{{ top.program.name }}</router-link> -->
                <!-- <a href="" :title="top.program.name">{{ top.program.name }}</a> -->
                <router-link :to="`/program?id=${top.program.id}`" :title="top.program.name">{{
                  top.program.name
                }}</router-link>
              </h3>
              <!-- <p>
              <a href="" :title="top.program.dj.brand">{{ top.program.dj.brand }}</a>
            </p> -->
            </div>
            <div class="artist col">
              <!-- <a href="" :title="top.program.dj.brand">{{ top.program.dj.brand }}</a> -->
              <router-link
                :to="`/djradio?id=${top.program.radio.id}`"
                :title="top.program.dj.brand"
                >{{ top.program.dj.brand }}</router-link
              >
            </div>
            <div class="tag-wrap f-fl">
              <a href="" class="f-fl tag">{{ top.program.radio.category }}</a>
            </div>
            <span class="hot f-fl"
              ><i :style="{ width: (top.score / radioTopList[0].score) * 100 + '%' }"><i></i></i
            ></span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 电台节目排行
      radioTopList: [],
      // 排行榜更新时间
      updateTime: ''
    }
  },
  methods: {
    // 获取电台排行榜
    async getRadioTopList() {
      const { data } = await this.$http.get('/dj/program/toplist?limit=100')
      // console.log(data)
      this.radioTopList = data.toplist
      this.updateTime = data.updateTime
    },
    // 将播放列表替换为榜单列表
    async playList(program) {
      let tracks = program.mainSong
      tracks.al = tracks.album
      tracks.ar = tracks.artists
      tracks.al.id = tracks.id
      tracks.al.name = tracks.name
      tracks.al.picUrl = program.coverUrl
      tracks.dt = tracks.duration
      const songidList = []
      let index = -1
      const songList = this.$store.state.Music.songList
      songList.forEach(item => {
        songidList.push(item.id)
      })
      if (songidList.includes(tracks.id)) {
        index = songidList.findIndex(item => item === tracks.id)
      } else {
        this.$store.commit('Music/pushSongList', tracks)
      }
      console.log('test1222 - findindex',index)
      console.log('test1222 - song.len',songList.length - 1)
      this.$store.commit('Music/setplayerSettingIndex', index == -1 ? songList.length - 1 : index)
    }
  },
  computed: {
    // 处理更新日期格式
    dateFormat() {
      const updateTime = new Date(this.updateTime)
      let m = updateTime.getMonth() + 1
      let d = updateTime.getDate()
      m = m.toString().padStart(2, '0')
      d = d.toString().padStart(2, '0')
      return m + '月' + d + '日'
    }
  },
  created() {
    this.getRadioTopList()
  }
}
</script>

<style lang="less" scoped>
@import url(./RadioRank.less);
</style>
